<template>
	<view class="body">
		<view class="msgbox">
			<image src="../../static/information/haqian.jpg" mode=""></image>
			<view class="msgbox-right">
				<view class="msgbox-right-top">
					<view class="username">
						{{user.name}}
					</view>
					<view class="msg">
						赞了我的评论
					</view>
					<view class="date">
						{{user.noticeDate}}
					</view>
				</view>
				<view class="noticeMsg">
					{{user.content}}
				</view>
			</view>
		</view>
		<hr>
		<view class="msgbox">
			<image src="../../static/information/haqian.jpg" mode=""></image>
			<view class="msgbox-right">
				<view class="msgbox-right-top">
					<view class="username">
						{{user.name}}
					</view>
					<view class="msg">
						赞了我的评论
					</view>
					<view class="date">
						{{user.noticeDate}}
					</view>
				</view>
				<view class="noticeMsg">
					{{user.content}}
				</view>
			</view>
		</view>
		<hr>
		<view class="msgbox">
			<image src="../../static/information/haqian.jpg" mode=""></image>
			<view class="msgbox-right">
				<view class="msgbox-right-top">
					<view class="username">
						{{user.name}}
					</view>
					<view class="msg">
						赞了我的评论
					</view>
					<view class="date">
						{{user.noticeDate}}
					</view>
				</view>
				<view class="noticeMsg">
					{{user.content}}
				</view>
			</view>
		</view>
		<hr>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				user:{
					name:'昵称已被占用',
					noticeDate:'2022.7.12',
					content:'四级不是有手就行（手动狗头'
				}
			}
		}
	}
</script>

<style>
	.msgbox{
		display: flex;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	image{
		height: 50px;
		width: 50px;
		border: solid 0.5rpx whitesmoke;
		border-radius: 50%;
		border: 2rpx solid rgb(150, 150, 150);
		margin-left: 15px;
		margin-right: 15px;
	}
	.msgbox-right-top{
		display: flex;
	}
	.username{
		width: 100px;
		font-size: 16px;
		font-weight: 500;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color:#98DCFF;
	}
	.date{
		font-size: 15px;
		margin-left: 10px;
		color:#BBBBBB;
	}
	.msg{
		font-size: 16px;
		color:#BBBBBB;
		margin-left: 5px;
	}
	.noticeMsg{
		margin-top:7px;
	}
	hr{
		background-color:#EDEFF4;
		height: 1px;
		border:none;
	}
</style>